<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test clipper js</title>
  <style>
    h3 {
      margin-bottom: 2px
    }

    body, th, td, input, legend, fieldset, p, b, button, select, textarea {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <div id="svgcontainer"></div>
  <script type="module">
    import ClipperJs, {Clipper} from "./src/3d/lib/clipper_js/ClipperJs.js";
    import {ClipType, PolyFillType, PolyType} from "./src/3d/lib/clipper_js/ClipperJs.js";

    const subj_paths = [[{X: 10, Y: 10}, {X: 60, Y: 10}, {X: 60, Y: 60}, {X: 10, Y: 60}]];
    const clip_paths = [[{X: 110, Y: 10}, {X: 160, Y: 10}, {X: 160, Y: 60}, {X: 110, Y: 60}]];
    // const subj_paths = [[{X: 10, Y: 10}, {X: 110, Y: 10}, {X: 110, Y: 110}, {X: 10, Y: 110}],
    //   [{X: 20, Y: 20}, {X: 20, Y: 100}, {X: 100, Y: 100}, {X: 100, Y: 20}]];
    // const clip_paths = [[{X: 50, Y: 50}, {X: 150, Y: 50}, {X: 150, Y: 150}, {X: 50, Y: 150}],
    //   [{X: 60, Y: 60}, {X: 60, Y: 140}, {X: 140, Y: 140}, {X: 140, Y: 60}]];
    // const subj_paths = [[{X: 10, Y: 10}, {X: 60, Y: 10}, {X: 60, Y: 60}, {X: 10, Y: 60}],
    //   [{X: 110, Y: 10}, {X: 160, Y: 10}, {X: 160, Y: 60}, {X: 110, Y: 60}]];
    // const clip_paths = [[{X: 5, Y: 20}, {X: 180, Y: 20}, {X: 180, Y: 25}, {X: 5, Y: 25}],
    //   [{X: -5, Y: 35}, {X: 175, Y: 35}, {X: 175, Y: 50}, {X: -5, Y: 50}]];
    const scale = 100;
    ClipperJs.ScaleUpPaths(subj_paths, scale);
    ClipperJs.ScaleUpPaths(clip_paths, scale);
    const cpr = new Clipper()
    cpr.AddPaths(subj_paths, PolyType.ptSubject, true);
    cpr.AddPaths(clip_paths, PolyType.ptClip, true);

    const subject_fillType = PolyFillType.pftNonZero;
    const clip_fillType = PolyFillType.pftNonZero;
    const clipTypes = [ClipType.ctUnion, ClipType.ctDifference, ClipType.ctXor, ClipType.ctIntersection]; //
    const clipTypesTexts = "Union, Difference, Xor, Intersection";
    let solution_paths, svg, cont = document.getElementById('svgcontainer');
    let i;
    for (i = 0; i < clipTypes.length; i++) {
      solution_paths = []
      cpr.Execute(clipTypes[i], solution_paths, subject_fillType, clip_fillType);
      console.log(JSON.stringify(solution_paths));
      svg = '<svg style="margin-top:10px; margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="160" height="160">';
      svg += '<path stroke="black" fill="yellow" stroke-width="2" d="' + paths2string(solution_paths, scale) + '"/>';
      svg += '</svg>';
      cont.innerHTML += svg;
    }
    cont.innerHTML += "<br>" + clipTypesTexts;
    
    // Converts Paths to SVG path string
    // and scales down the coordinates
    function paths2string(paths, scale) {
      var svgpath = "", i, j;
      if (!scale) scale = 1;
      for (i = 0; i < paths.length; i++) {
        for (j = 0; j < paths[i].length; j++) {
          if (!j) svgpath += "M";
          else svgpath += "L";
          svgpath += (paths[i][j].X / scale) + ", " + (paths[i][j].Y / scale);
        }
        svgpath += "Z";
      }
      if (svgpath == "") svgpath = "M0,0";
      return svgpath;
    }
  </script>
</body>
</html>
